<template>
  <view>
    <view class="nodata" v-if="fileList.length==0 &&!isLoading">
      <image class="no_data_img" src="../../static/images/blank.png"></image>
      <text class="no_data_text">暂无数据</text>
    </view>
    <view class="card" v-for="(item,index) in fileList" :key="index" @click="onItemClick(item)">
      <view class="left_container">
        <view class="title">{{item.fileName}}</view>
        <veiw class="content">{{item.fileCtype}}</veiw>
      </view>
      <view class="right_container">
        <image class="image" :src="getCtypeSrc(item.fileCtype)"></image>
        <view class="date_text">{{getFormateTime(item.gmtCreate)}}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app';
  import { getFilePage } from '@/services/file';
  import { queryFileCollectPage } from '@/services/collect'
  import { useMemberStore } from '@/stores'
  import { getFileType } from '@/utils/upload';

  const query = defineProps<{ collect : boolean }>()
  const userInfo : any = useMemberStore().getUserInfo()

  //是否仅展示收藏
  const isCollect = ref(false)

  //记载中
  const isLoading = ref(true)
  const fileList = ref<any[]>([])
  const dictTypeCode = 2

  onLoad(() => {
    isCollect.value = query.collect
    getData()
  })

  const getData = () => {
    if (isCollect.value) {
      //仅展示我的收藏数据
      queryFileCollectPage({ dictTypeCode, "userCode": userInfo.userCode })
        .then((res : any) => {
          console.log("ok:");
          console.log(res);
          fileList.value = res.list;
        })
      return
    }
    isLoading.value = true
    getFilePage({ dictTypeCode }).then((res : any) => {
      fileList.value = res.list
      isLoading.value = false
    }).catch(e => {
      isLoading.value = false
      console.log(e)
    })
  }
  /**
   * 时间
   */
  const getFormateTime = (timestamp : any) => {

    const date = new Date(timestamp);

    const timeString = date.toLocaleString();
    console.log(timeString);

    // 或者自定义格式（例如："YYYY-MM-DD HH:mm:ss"）
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    // const formattedString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    const formattedString = `${year}-${month}-${day}`;
    return formattedString
  }
  /**
   * 获取类型对应的图片
   */
  const getCtypeSrc = computed(() => (ctype : string) => {
    let src = '/src/static/images/icon_file_img.png'
    if (ctype == 'doc' || ctype == 'docx') {
      src = '/src/static/images/icon_doc.png'
    } else if (ctype == 'png' || ctype == 'jpg' || ctype == 'jpeg') {
      src = '/src/static/images/icon_jpg.png'
    } else if (ctype == 'pdf') {
      src = '/src/static/images/icon_pdf.png'
    } else if (ctype == 'xls' || ctype == 'xlsx') {
      src = '/src/static/images/icon_xls.png'
    }
    const moudle : any = import.meta.glob('/src/static/images/*', { eager: true })
    return moudle[src].default
  })

  //跳转详情
  const onItemClick = (item : any) => {
    console.log(item)
    uni.navigateTo({
      url: `/pagesMember/mediaPreview/mediaPreview?data=${JSON.stringify({
        fileCtype: getFileType(item.attachId),
        fileUrl: item.attachId,
        fileCode: item.fileCode,
        coverUrl: item.coverUrl,
        dictTypeCode,
        showOption: true,
        isCollect: isCollect.value,
        fileCollectCode: item.fileCollectCode
      })}`
    })
  }
</script>

<style>
  page {
    background-color: #f5f6f5;

  }

  .card {
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .left_container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .right_container {

    width: 40vw;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }

  .title {
    height: 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40rpx;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }

  .content {
    height: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #394259;
    font-weight: 500;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .date_text {
    height: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #888E98;
    line-height: 30rpx;
    text-align: right;
    font-style: normal;
  }

  .image {
    align-self: flex-end;
    width: 80rpx;
    height: 80rpx;
  }

  .nodata {
    display: flex;
    height: 80vh;
    align-items: center;
    flex-direction: column;

  }

  .no_data_img {
    margin-top: 25vh;
    height: 84rpx;
    width: 100rpx;
  }

  .no_data_text {
    margin-top: 30rpx;
    color: darkgray;
  }
</style>
